/**
* Author:LSP
* Date:2020-12-22
*/
// @导入引用开发环境
if (typeof require === 'undefined') require = importModule
const { Base } = require("./lsp环境")

// @小组件配置
const widgetConfigs = {
    // 是否是iPhone12mini
    isIphone12Mini: false,
    refreshInterval: 0, // 缓存刷新时间--估算(单位：分钟)

    selectPicBg: true, // 选择图片
    colorBgMode: false,  // 纯色背景模式
    bgColor: Color.black(), // 黑色背景

    // 便签文本
    text: "但行好事，莫问前程",
    // 字体大小
    fontSize: 32,
    // 行数限制
    lineLimit: 2,
    // 文字行间距
    rowSpacing: 5,
    // 文本颜色
    textColor: "FFFFFF",
    // 便签整体背景色
    backgroundColor: "222222",
    // 字体样式链接
    fontUrl: "https://mashangkaifa.coding.net/p/coding-code-guide/d/coding-code-guide/git/raw/master/fangzhengxingkai.ttf",

    padding: {
        top: 10, // 上边距
        left: 10, // 左边距
        bottom: 10, // 底边距
        right: 2, // 右边距
    },

    // 预览模式：0：小尺寸，1：中等尺寸，2：大尺寸，负数：不预览
    previewMode: 1,
}

// @canvas
/**
 * 自定义字体渲染
 */
class CustomFont {
    constructor(webview, config) {
        this.webview = webview || new WebView()
        this.fontFamily = config.fontFamily || 'customFont'
        this.fontUrl = 'url(' + config.fontUrl + ')'
        this.timeout = config.timeout || 20000
    }

    async load() { // 加载字体
        return await this.webview.evaluateJavaScript(`
        const customFont = new FontFace("${this.fontFamily}", "${this.fontUrl}");
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        let baseHeight,extendHeight;
        log('loading font.');
        customFont.load().then((font) => {
            document.fonts.add(font);
            log('load font successfully.');
            completion(true);
        });
        setTimeout(()=>{
            log('load font failed：timeout.');
            completion(false);
        },${this.timeout});
        null`, true)
    }

    async drawText(text, config) {
        // 配置
        const fontSize = config.fontSize || 20
        const textWidth = config.textWidth || 300
        const align = config.align || 'left' // left、right、center
        const lineLimit = config.lineLimit || 99
        const rowSpacing = config.rowSpacing || 0
        const textColor = config.textColor || 'white'
        const textArray = await this.cutText(text, fontSize, textWidth)
        const scale = config.scale || 1

        let script = ''
        for (let i in textArray) {
            let content = textArray[i].str
            let length = textArray[i].len

            if (i >= lineLimit) break
            if (i == lineLimit - 1 && i < textArray.length - 1)
                content = content.replace(/(.{1})$/, '…')

            let x = 0, y = Number(i) * fontSize
            if (rowSpacing > 0 && i > 0) y = y + rowSpacing
            if (i > 0) {
                if (align === 'right') {
                    x = textWidth - length
                } else if (align === 'center') {
                    x = (textWidth - length) / 2
                }
            }
            script = script + `ctx.fillText("${content}", ${x}, ${y});`
        }

        const realWidth = textArray.length > 1 ? textWidth : textArray[0].len
        const lineCount = lineLimit < textArray.length ? lineLimit : textArray.length
        const returnValue = await this.webview.evaluateJavaScript(`
        log(${scale})
        canvas.width=${realWidth}*${scale};
        ctx.font = "${fontSize}px ${this.fontFamily}";
        ctx.textBaseline= "hanging";
        baseHeight= ${(fontSize + rowSpacing) * (lineCount - 1)};
        extendHeight= ctx.measureText('qypgj').actualBoundingBoxDescent;
        canvas.height= (baseHeight + extendHeight)*${scale};
        ctx.scale(${scale}, ${scale});
    
        ctx.font = "${fontSize}px ${this.fontFamily}";
        ctx.fillStyle = "${textColor}";
        ctx.textBaseline= "hanging";
        ${script}
        canvas.toDataURL()`, false)

        const imageDataString = returnValue.slice(22)
        const imageData = Data.fromBase64String(imageDataString)
        return Image.fromData(imageData)
    }

    async cutText(text, fontSize, textWidth) { // 处理文本
        return await this.webview.evaluateJavaScript(`
        function cutText(textWidth, text){
            ctx.font = "${fontSize}px ${this.fontFamily}";
            ctx.textBaseline= "hanging";
    
            let textArray=[];
            let len=0,str='';
            for(let i=0;i<text.length;i++){
                const char=text[i]
                const width=ctx.measureText(char).width;
                if(len < textWidth){
                    str=str+char;
                    len=len+width;
                }
                if(len == textWidth){
                    textArray.push({str:str,len:len,});
                    str='';len=0;
                }
                if(len > textWidth){
                    textArray.push({
                    str:str.substring(0,str.length-1),
                    len:len-width,});
                    str=char;len=width;
                }
                if(i==text.length-1 && str){
                    textArray.push({str:str,len:len,});
                }
            }
            return textArray
        }
        cutText(${textWidth},"${text}")
        `)
    }
}

// @定义小组件
class Widget extends Base {
    constructor(scriptName) {
        super(scriptName)
        // 初始化其他变量
        this.setSelectPicBg(widgetConfigs.selectPicBg)
        this.setColorBgMode(widgetConfigs.colorBgMode, widgetConfigs.bgColor)
        this.paddingSetting(Object.assign(widgetConfigs.padding))
        this.refreshIntervalTime(widgetConfigs.refreshInterval)
        this.setPreViewSizeMode(widgetConfigs.previewMode)
    }

    //-------------------------------------
    /**
     * @渲染小组件
     */
    async render() {
        const font = new CustomFont(new WebView(), {
            fontFamily: 'customFont', // 字体名称
            fontUrl: widgetConfigs.fontUrl, // 字体地址
            timeout: 60000, // 加载字体的超时时间
        }) // 创建字体
        await font.load() // 加载字体
        const image = await font.drawText(widgetConfigs.text, {
            fontSize: widgetConfigs.fontSize, // 字体大小
            textWidth: 0, // 文本宽度
            align: 'center', // left、right、center
            lineLimit: widgetConfigs.lineLimit, // 文本行数限制
            rowSpacing: widgetConfigs.rowSpacing, // 文本行间距
            textColor: widgetConfigs.textColor, // 文本颜色
            scale: 2, // 缩放因子
        })

        const widget = new ListWidget()
        const contentStack = widget.addStack()
        contentStack.layoutHorizontally()
        const imgSpan = contentStack.addImage(image)
        imgSpan.imageSize = new Size(image.size.width / 2, image.size.height / 2)
        imgSpan.centerAlignImage()

        //-------------------------------------
        return widget
    }
}

// @运行测试
const { Running } = require("./lsp环境")
await Running(Widget, Script.name())